<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="res/easyui1.5.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="res/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="res/css/reset.css"/>
<script type="text/javascript" src="res/easyui1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="res/easyui1.5.3/jquery.easyui.min.js"></script>
<script src="res/easyui1.5.3/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
<script src="res/easyui1.5.3/easyui-utils.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	.menu-link{
		height: 25px;
		line-height: 25px;
		cursor: pointer;
		margin-bottom: 5px;
		border-bottom: 1px solid #ccc;
		padding-left: 10px;
		position: relative;
	}
	.menu-link:hover{
		background-color: #E68900;
	}
	/*解决出现双重边框线*/
	#mainContentBox.panel-body{
		border: none;
	}
	/*解决右边出现双重滚动条*/
	#tabs .tabs-panels>.panel>.panel-body {  
    	overflow: hidden;  
    	border: none;
    	 border-width: 0px; 
	     border-style: solid; 
    } 

</style>

<!-- 脚本 -->
<script type="text/javascript">
	$(function(){
        $('#tabs').tabs({
            onContextMenu:function(e, title, index){
                e.preventDefault();
                if(index>0){
                    $('#tabMenus').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    }).data("currtab", title);
                }
            }
        });
        //右键菜单click
        $("#tabMenus").menu({
            onClick : function (item) {
                closeTab("#tabMenus", item.id);
            }
        });
		// 为每个资源菜单绑定点击事件
		$("#menuDivBox .menu-link").each(function() {
		    $(this).on("click", function() {
		    	var linkUrl = $(this).attr("linkUrl");
		    	var text = $(this).html();
		       if(linkUrl!=null && linkUrl!="" && linkUrl!=undefined){
		       		addTab(text, linkUrl);
		       }
		    });
		});
	});

	/**
	 * 打开修改密码的对话框
	 */
	function openUpdatePasswordDialog(){
		$("#oldPassword").val('');
		$("#newPassword").val('');
		$("#newPassword2").val('');
		$("#updatePasswordDialog" ).dialog('open');
	}
	
	/**
	 * 关闭修改密码对话框
	 */
	function closeUpdatePasswordDialog(){
		$('#updatePasswordDialog').dialog('close');
	}
	
	/**
	 * 提交修改的密码数据
	 */
	function sumbitUpdatePassword(){
		var oldPasssword = $("#oldPassword").val();
		var newPasssword = $("#newPassword").val();
		var new2Passsword = $("#newPassword2").val();
		if(oldPasssword=="" || newPasssword=="" || new2Passsword==""){
			showMsg("请输入要旧密码和新密码！", 1);
			return;
		}
		if(newPasssword != new2Passsword){
			showMsg("两次新密码不一致！", 1);
			return;
		}
		showMsg("密码修改成功！", 0);
		closeUpdatePasswordDialog();
		return;
		$.ajax({
			type:"post",
			url:"update/password",
			async:true,
			success:function(data){
				if(data.statu == 1){
					showMsg(data.msg);
				}else{
					showMsg(data.msg, 1);
				}
				closeUpdatePasswordDialog();
			}
		});
	}
	
	/**
	 * 打开退出确认对话框
	 */
	function confirmLogout(){
		$.messager.confirm('退出确认','你确定要退出吗？',function(r){   
		    if (r){   
		        alert('安全退出');   
		    }   
		}); 
	}
</script>
<!-- 脚本 end-->
</head>
<body class="easyui-layout">
	<!--顶部logo区域-->
	<div data-options="region:'north',border:false" style="height:50px;overflow: hidden;">
		<div style="width: 500px; float: left; padding-left: 10px; line-height: 50px; font-size: 40px; font-weight: bold; ">XX管理系统</div>
		<div style="width: 180px; float: right; text-align: center;line-height: 50px;">
			<a href="javascript:openUpdatePasswordDialog()" class="easyui-linkbutton" style="width:80px">修改密码</a>
			<a href="javascript:confirmLogout()" class="easyui-linkbutton" style="width:80px">安全退出</a>
		</div>
		<div style="width: 500px; float: right;line-height: 50px; font-size: 22px;">
			角色名称:<span style="font-weight: bold; color: red;">管理员角色</span> | 登录用户名:<span style="color: red; font-weight: bold;">admin</span>
		</div>
	</div>
	<!--顶部logo区域-->
	
	<!--左侧导航菜单区域-->
	<div data-options="region:'west',split:true,title:'功能菜单'" style="width:200px;">
		<div id="menuDivBox" class="easyui-accordion" fit="true" border="false">
			<div title="权限管理" data-options="iconCls:'icon-menu'" style="overflow:auto;">
				<div class="menu-link" linkUrl="rbac/resource.html">资源管理</div>
				<div class="menu-link" linkUrl="rbac/role.html">角色管理</div>
				<div class="menu-link" linkUrl="role.html">用户管理</div>
			</div>
			<div title="XX管理" data-options="iconCls:'icon-menu'" style="overflow:auto;">
				<div class="menu-link" linkUrl="role.html">角色管理2</div>
			</div>
			<div title="XX管理" data-options="iconCls:'icon-menu'" style="overflow:auto;">
				<div class="menu-link" linkUrl="role.html">角色管理3</div>
			</div>
			<div title="XX管理" data-options="iconCls:'icon-menu'" style="overflow:auto;">
				<div class="menu-link" linkUrl="role.html">角色管理4</div>
			</div>
			<div title="XX管理" data-options="iconCls:'icon-menu'" style="overflow:auto;">
				<div class="menu-link" linkUrl="role.html">角色管理5</div>
			</div>
		</div>
	</div>
	<!--左侧导航菜单区域end-->
	
	<!-- 主要区域区 -->
	<div id="mainContentBox" data-options="region:'center'">
		<div id="tabs" class="easyui-tabs"  fit="true" border="false" >
			<div title="欢迎使用" style="padding:20px; overflow:hidden;" id="home">
				<div style="width: 400px; height: 200px; margin: 0 auto; line-height: 200px; font-size: 72px; text-align: center;">
					欢迎使用
				</div>
			</div>
		</div>
	</div>
	<!-- 主要区域区end -->
	
	<!--底部版权信息-->
	<div data-options="region:'south',border:false" style="height:20px;">
		<div style="text-align: center;line-height: 20px; color: #CCCCCC;">版权所有：<a href="#" style="color: #CCCCCC; text-decoration: none;">XX管理有限公司</a></div>
	</div>
	<!--底部版权信息end-->
	
	<!--修改密码对话框-->
	<div id="updatePasswordDialog" class="easyui-dialog" title="修改密码对话框" style="width:300px;height:180px; text-align: center;"  
        data-options="iconCls:'icon-edit',resizable:false,modal:true, closed:true, buttons:'#updatePasswordDialogButtons'"> 
        <table cellpadding="5" style="border-collapse:separate; border-spacing:0px 10px; margin:auto;">
        	<tr>
        		<td style="text-align: right;">旧密码:</td>
        		<td><input type="password" id="oldPassword" style="width: 120px;"/></td>
        	</tr>
        	<tr>
        		<td style="text-align: right;">新密码:</td>
        		<td><input type="password" id="newPassword" style="width: 120px;"/></td>
        	</tr>
        	<tr>
        		<td style="text-align: right;">确认新密码:</td>
        		<td><input type="password" id="newPassword2" style="width: 120px;"/></td>
        	</tr>
        </table>
	</div>  
	<div id="updatePasswordDialogButtons" style="text-align: center;">
		<a href="javascript:sumbitUpdatePassword()" class="easyui-linkbutton">确定</a>
		<a href="javascript:closeUpdatePasswordDialog();" class="easyui-linkbutton">关闭</a>
	</div>
	<!--修改密码对话框end-->
	
	<!--右键关闭tabs标签的内容-->
	<div id="tabMenus" class="easyui-menu" style="width:150px;">
		<div id="tabMenus_0">刷新</div>
		<div id="tabMenus_1">关闭</div>
		<div id="tabMenus_2">全部关闭</div>
		<div id="tabMenus_3">除此之外全部关闭</div>
		<div id="tabMenus_6">退出</div>
	</div>
	<!--右键关闭tabs标签的内容end-->
</body>
</html>
